<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 怪物大师
  Date: 2024/6/21
  Time: 17:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        .header {
            background: #fff;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .header h1 {
            margin: 0;
            font-size: 24px;
        }
        .header nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #333;
        }
        .rooms {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
        }
        .room {
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            width: 300px;
        }
        .room img {
            width: 100%;
            height: auto;
        }
        .room-info {
            padding: 10px;
        }
        .room-info p {
            margin: 5px 0;
        }
    </style>

</head>
<body>

<div class="header">
    <h1>Sona.</h1>
    <nav>
        <a href="index.jsp">首页</a>
        <a href="roomviewa.jsp">在线订房</a>
        <a href="#">关于我们</a>
        <a href="#">联系方式</a>
        <a href="login.jsp">系统管理</a>
    </nav>
</div>
<h2>我们的房间</h2>
<div class="rooms">
    <c:forEach var="room" items="${rooms}" >
        <div class="room">
            <a href="${pageContext.request.contextPath}/ShowRoomDetailsServlet?room_id=${room.room_id}">
                <img src="${pageContext.request.contextPath}/img/room${room.room_id % 3}.PNG" alt="豪华客房">
                <div class="room-info">
                    <p>${room.room_name}</p>
                    <p>${room.room_price}元/每晚</p>
                    <p>${room.room_area}平方米</p>
                </div>
            </a>
        </div>
    </c:forEach>
</div>

</body>
</html>
